葫芦的运维日志

下一篇 搜索 上一篇

---

Home.vue

跳转主要有以下几种方式：

  goToBefore(){
      //跳转到上一次浏览的页面
      this.$router.go(-1);
    },
    //指定跳转的地址
    goToMenu(){
      this.$router.replace("/menu");
    },
    //指定跳转路由的名字下
    goToRouterName(){
      this.$router.replace({name:'menulink'});
    },
    //通过push进行跳转
    pushMenu(){
      //1. this.$router.push('/menu');
     //2. this.$router.push({name:'menulink'});
    }
 

<template>
  <div>
    <h1>Home</h1>
    <button @click="goToBefore" class="btn btn-success">跳转到上一次页面</button>
    <button @click="goToMenu" class="btn btn-success">跳转到指定menu</button>
    <button @click="goToRouterName" class="btn btn-success">跳转到指定路由的名字下</button>
    <button @click="pushMenu" class="btn btn-success">push跳转</button>

  </div>
</template>

<script>
  export default {
  methods:{
    goToBefore(){
      //跳转到上一次浏览的页面
      this.$router.go(-1);
    },
    //指定跳转的地址
    goToMenu(){
      this.$router.replace("/menu");
    },
    //指定跳转路由的名字下
    goToRouterName(){
      this.$router.replace({name:'menulink'});
    },
    //通过push进行跳转
    pushMenu(){
      // this.$router.push('/menu');
      this.$router.push({name:'menulink'});
    }

  }
  }
</script>

<style scoped>


</style>

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
import About from './components/about/About'
import Login from './components/Login'
import Register from './components/Register'


Vue.use(VueRouter)

const routes=[
  {path:'/',component:Home},
  {path:'/menu',name:"menulink",component:Menu},
  {path:'/admin',component:Admin},
  {path:'/about',component:About},
  {path:'/login',component:Login},
  {path:'/register',component:Register},
  {path:"*",redirect:'/'}
]
const router=new VueRouter({
  routes,
  mode:'history'

})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇